<template>
  <div class="app-container">
    <el-form ref="vForm" :model="formData" :rules="rules" label-position="left" label-width="150px"
             size="default" @submit.prevent>
      <div class="tab-container">
        <el-tabs v-model="tab26822ActiveTab" type="border-card">
          <el-tab-pane label="基础信息" name="tab1">
          </el-tab-pane>
          <el-tab-pane label="结算账户信息" name="tab-pane-98955">
          </el-tab-pane>
          <el-tab-pane label="备案账户信息" name="tab-pane-57008">
          </el-tab-pane>
          <el-tab-pane label="图片列表" name="tab-pane-85260">
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <el-form-item class="required label-right-align" label="入网方式" prop="netType">
        <el-select v-model="formData.netType" class="full-width-input" clearable>
          <el-option v-for="(item, index) in netTypeOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="是否收单" prop="acceptOrder">
        <el-switch v-model="formData.acceptOrder"></el-switch>
      </el-form-item>
      <el-form-item class="required label-right-align" label="商户名称" prop="merchantName">
        <el-input v-model="formData.merchantName" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="required label-right-align" label="商户简称" prop="shortName">
        <el-input v-model="formData.shortName" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="地址信息" prop="cascader110353">
        <el-cascader v-model="formData.cascader110353" :options="cascader110353Options" class="full-width-input"
                     clearable></el-cascader>
      </el-form-item>
      <el-form-item class="label-right-align" label="详细地址" prop="address">
        <el-input v-model="formData.address" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="证件类型" prop="idCardType">
        <el-select v-model="formData.idCardType" class="full-width-input" clearable>
          <el-option v-for="(item, index) in idCardTypeOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="法人身份证名称" prop="idCardName">
        <el-input v-model="formData.idCardName" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="法人身份证号码" prop="idCardNo">
        <el-input v-model="formData.idCardNo" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="法人身份证有效日期" prop="daterange45557">
        <el-date-picker v-model="formData.daterange45557" class="full-width-input" clearable format="YYYY-MM-DD"
                        is-range type="daterange" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <el-form-item class="required label-right-align" label="营业执照号" prop="licenceNo">
        <el-input v-model="formData.licenceNo" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="营业执照有效日期" prop="daterange73717">
        <el-date-picker v-model="formData.daterange73717" class="full-width-input" clearable format="YYYY-MM-DD"
                        is-range type="daterange" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item class="label-right-align" label="税务登记号" prop="taxNo">
        <el-input v-model="formData.taxNo" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="组织代码证" prop="organizationCode">
        <el-input v-model="formData.organizationCode" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="组织代码证有效日期" prop="daterange51832">
        <el-date-picker v-model="formData.daterange51832" class="full-width-input" clearable format="YYYY-MM-DD"
                        is-range type="daterange" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <el-form-item class="label-right-align" label="结算类型" prop="settlementType">
        <el-select v-model="formData.settlementType" class="full-width-input" clearable>
          <el-option v-for="(item, index) in settlementTypeOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="提现方式" prop="settlementTarget">
        <el-select v-model="formData.settlementTarget" class="full-width-input" clearable>
          <el-option v-for="(item, index) in settlementTargetOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="经营范围" prop="scopeArea">
        <el-input v-model="formData.scopeArea" rows="3" type="textarea"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="MCC类型" prop="mccCode">
        <el-select v-model="formData.mccCode" class="full-width-input" clearable>
          <el-option v-for="(item, index) in mccCodeOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="外部商户号" prop="merchantNo">
        <el-input v-model="formData.merchantNo" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="联系人手机号" prop="contactMobile">
        <el-input v-model="formData.contactMobile" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="联系人姓名" prop="contactName">
        <el-input v-model="formData.contactName" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="联系人邮箱" prop="contactEmail">
        <el-input v-model="formData.contactEmail" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="服务电话" prop="serviceTel">
        <el-input v-model="formData.serviceTel" clearable type="text"></el-input>
      </el-form-item>
      <div class="static-content-item">
        <el-button>下一步</el-button>
      </div>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <el-form-item class="label-right-align" label="银行编码" prop="bankCode">
        <el-select v-model="formData.bankCode" class="full-width-input" clearable>
          <el-option v-for="(item, index) in bankCodeOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="账户名称" prop="bankAccountName">
        <el-input v-model="formData.bankAccountName" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="账户" prop="bankAccountNo">
        <el-input v-model="formData.bankAccountNo" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="账户类型" prop="bankAccountType">
        <el-select v-model="formData.bankAccountType" class="full-width-input" clearable>
          <el-option v-for="(item, index) in bankAccountTypeOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="银行联行号" prop="bankLineNo">
        <el-select v-model="formData.bankLineNo" class="full-width-input" clearable>
          <el-option v-for="(item, index) in bankLineNoOptions" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="开户行" prop="openBank">
        <el-input v-model="formData.openBank" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="银行预留手机" prop="acctMobile">
        <el-input v-model="formData.acctMobile" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="开户人身份证号码" prop="accountIdCardNo">
        <el-input v-model="formData.accountIdCardNo" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="开户人身份证有效期" prop="daterange79029">
        <el-date-picker v-model="formData.daterange79029" class="full-width-input" clearable format="YYYY-MM-DD"
                        is-range type="daterange" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <el-form-item class="label-right-align" label="银行编码" prop="select31143">
        <el-select v-model="formData.select31143" class="full-width-input" clearable>
          <el-option v-for="(item, index) in select31143Options" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="账户名称" prop="input87023">
        <el-input v-model="formData.input87023" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="账户" prop="input33406">
        <el-input v-model="formData.input33406" clearable type="text"></el-input>
      </el-form-item>
      <el-form-item class="label-right-align" label="银行联行号" prop="select104077">
        <el-select v-model="formData.select104077" class="full-width-input" clearable>
          <el-option v-for="(item, index) in select104077Options" :key="index" :disabled="item.disabled"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="label-right-align" label="开户行" prop="input23734">
        <el-input v-model="formData.input23734" clearable type="text"></el-input>
      </el-form-item>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <el-form-item class="required label-right-align" label="法人身份证(正面)" prop="pictureupload53339">
        <el-upload :data="pictureupload53339UploadData" :file-list="pictureupload53339FileList"
                   :headers="pictureupload53339UploadHeaders" :limit="1" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="法人身份证(反面)" prop="pictureupload32581">
        <el-upload :data="pictureupload32581UploadData" :file-list="pictureupload32581FileList"
                   :headers="pictureupload32581UploadHeaders" :limit="1" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="收款人身份证(正面)" prop="pictureupload35702">
        <el-upload :data="pictureupload35702UploadData" :file-list="pictureupload35702FileList"
                   :headers="pictureupload35702UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="收款人身份证(反面)" prop="pictureupload101878">
        <el-upload :data="pictureupload101878UploadData" :file-list="pictureupload101878FileList"
                   :headers="pictureupload101878UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="结算账户(正面)" prop="pictureupload39116">
        <el-upload :data="pictureupload39116UploadData" :file-list="pictureupload39116FileList"
                   :headers="pictureupload39116UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="营业执照" prop="pictureupload13286">
        <el-upload :data="pictureupload13286UploadData" :file-list="pictureupload13286FileList"
                   :headers="pictureupload13286UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="税务登记证" prop="pictureupload26262">
        <el-upload :data="pictureupload26262UploadData" :file-list="pictureupload26262FileList"
                   :headers="pictureupload26262UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="开户许可证" prop="pictureupload104569">
        <el-upload :data="pictureupload104569UploadData" :file-list="pictureupload104569FileList"
                   :headers="pictureupload104569UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="门店照片" prop="pictureupload119174">
        <el-upload :data="pictureupload119174UploadData" :file-list="pictureupload119174FileList"
                   :headers="pictureupload119174UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="收银台照片" prop="pictureupload87754">
        <el-upload :data="pictureupload87754UploadData" :file-list="pictureupload87754FileList"
                   :headers="pictureupload87754UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="店内商品照片" prop="pictureupload46724">
        <el-upload :data="pictureupload46724UploadData" :file-list="pictureupload46724FileList"
                   :headers="pictureupload46724UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
      <el-form-item class="required label-right-align" label="组织代码证" prop="pictureupload66472">
        <el-upload :data="pictureupload66472UploadData" :file-list="pictureupload66472FileList"
                   :headers="pictureupload66472UploadHeaders" :limit="3" list-type="picture-card" show-file-list>
          <template
              #default><i class="el-icon-plus"></i></template>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance
}
  from 'vue'

export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        netType: "",
        acceptOrder: true,
        merchantName: "",
        shortName: "",
        cascader110353: [1, 11],
        address: "",
        idCardType: "",
        idCardName: "",
        idCardNo: "",
        daterange45557: null,
        licenceNo: "",
        daterange73717: null,
        taxNo: "",
        organizationCode: "",
        daterange51832: null,
        settlementType: "",
        settlementTarget: "",
        scopeArea: "",
        mccCode: "",
        merchantNo: "",
        contactMobile: "",
        contactName: "",
        contactEmail: "",
        serviceTel: "",
        bankCode: "",
        bankAccountName: "",
        bankAccountNo: "",
        bankAccountType: 3,
        bankLineNo: "",
        openBank: "",
        acctMobile: "",
        accountIdCardNo: "",
        daterange79029: null,
        select31143: "",
        input87023: "",
        input33406: "",
        select104077: "",
        input23734: "",
        pictureupload53339: null,
        pictureupload32581: null,
        pictureupload35702: null,
        pictureupload101878: null,
        pictureupload39116: null,
        pictureupload13286: null,
        pictureupload26262: null,
        pictureupload104569: null,
        pictureupload119174: null,
        pictureupload87754: null,
        pictureupload46724: null,
        pictureupload66472: null,
      },
      rules: {
        netType: [{
          required: true,
          message: '字段值不可为空',
        }],
        merchantName: [{
          required: true,
          message: '字段值不可为空',
        }],
        shortName: [{
          required: true,
          message: '字段值不可为空',
        }],
        licenceNo: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload53339: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload32581: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload35702: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload101878: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload39116: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload13286: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload26262: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload104569: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload119174: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload87754: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload46724: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload66472: [{
          required: true,
          message: '字段值不可为空',
        }],
      },
      'tab26822ActiveTab': 'tab1',
      netTypeOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      cascader110353Options: [{
        "label": "山东省",
        "value": 1,
        "children": [{
          "label": "济南市",
          "value": 11,
          "children": [{
            "label": "历下区",
            "value": 111
          }]
        }]
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      idCardTypeOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      settlementTypeOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      settlementTargetOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      mccCodeOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      bankCodeOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      bankAccountTypeOptions: [{
        "label": "对公",
        "value": "1"
      }, {
        "label": "对私",
        "value": 2
      }],
      bankLineNoOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      select31143Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      select104077Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      pictureupload53339FileList: [],
      pictureupload53339UploadHeaders: {},
      pictureupload53339UploadData: {},
      pictureupload32581FileList: [],
      pictureupload32581UploadHeaders: {},
      pictureupload32581UploadData: {},
      pictureupload35702FileList: [],
      pictureupload35702UploadHeaders: {},
      pictureupload35702UploadData: {},
      pictureupload101878FileList: [],
      pictureupload101878UploadHeaders: {},
      pictureupload101878UploadData: {},
      pictureupload39116FileList: [],
      pictureupload39116UploadHeaders: {},
      pictureupload39116UploadData: {},
      pictureupload13286FileList: [],
      pictureupload13286UploadHeaders: {},
      pictureupload13286UploadData: {},
      pictureupload26262FileList: [],
      pictureupload26262UploadHeaders: {},
      pictureupload26262UploadData: {},
      pictureupload104569FileList: [],
      pictureupload104569UploadHeaders: {},
      pictureupload104569UploadData: {},
      pictureupload119174FileList: [],
      pictureupload119174UploadHeaders: {},
      pictureupload119174UploadData: {},
      pictureupload87754FileList: [],
      pictureupload87754UploadHeaders: {},
      pictureupload87754UploadData: {},
      pictureupload46724FileList: [],
      pictureupload46724UploadHeaders: {},
      pictureupload46724UploadData: {},
      pictureupload66472FileList: [],
      pictureupload66472UploadHeaders: {},
      pictureupload66472UploadData: {},
    })
    const instance = getCurrentInstance()
    const submitForm = () => {

    }
    const resetForm = () => {

    }
    return {
      ...toRefs(state),
      submitForm,
      resetForm
    }
  }
})

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}

</style>
